<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <ul class="breadcrumb">
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a href="/qd/zhjscgjl">教室参观记录</a>
                </li>
                <li class="active">
                    登记
                </li>
            </ul>
            <div class="panel-body">
                <div id="toolbar" class="btn-group">
                    <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-isok">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增参观记录
                        </button>
                </div>
                <div class="pre-scrollable">
                    <!--table id="table" data-use-row-attr-func="true" data-reorderable-rows="true"-->
                    <table id="tb_list">
                        <!--上面的是可以拖动行排序的二个选项-->
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!--a id="modal-773326" href="#modal-isok" role="button" class="btn" data-toggle="modal">触发遮罩窗体</a-->

<div class="modal" id="modal-isok" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">
                    增加智慧教室参观记录：
                </h4>
            </div>
            <div class="modal-body">
                <!--正文 开始-->
                <div class="row clearfix">
                    <form name="form" class="form-horizontal" role="form" method="post" action="/qd/zhjscgjl">
                        <div class="col-md-6 column">

                            <div class="form-group">
                                <label for="Riqi" class="col-sm-3 control-label">日期</label>
                                <div class="col-sm-9">
                                    <input type="date" name="riqi" class="form-control" id="riqi" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="xxmc" class="col-sm-3 control-label">学校名称</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="xxmc" name="xxmc" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lxr" class="col-sm-3 control-label">联系人</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="lxr" name="lxr" />
                                </div>
                            </div>

                        </div>
                        <div class="col-md-6 column">

                            <div class="form-group">
                                <label for="tel" class="col-sm-3 control-label">电话</label>
                                <div class="col-sm-9">
                                    <input type="tel" class="form-control" id="tel" name="tel" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="zhiw" class="col-sm-3 control-label">职务</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="zhiw" name="zhiw" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="xxjdr" class="col-sm-3 control-label">学校接待人</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="xxjdr" name="xxjdr" />
                                </div>
                            </div>

                        </div>
                        <div class="col-md-12 column">
                            <!--重置表单的隐藏元素-->
                            <input type="reset" name="button" id="btn_reset" value="重置" style="display:none" />
                            <button type="submit" id="btn-save" class="btn btn-info btn-lg btn-block">保存</button>
                        </div>
                    </form>

                </div>
                <!--正文  结束 -->
            </div>
            <div class="modal-footer">
                <div id="textinfo" class="col-md-9 column text-left text-danger">
                    <strong></strong>
                </div>
                <div class="col-md-3 column">
                    <button type="submit" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>

    </div>

</div>



<script>
    $riqi = $("#riqi");
    $xxmc = $('#xxmc');
    $lxr = $('#lxr');
    $tel = $('#tel');
    $zhiw = $('#zhiw');
    $xxjdr = $("#xxjdr");
    $btn_save = $("#btn-save");
    $tb_list = $("#tb_list");

    //刷新表格
    function refresh_tb_list() {
        $tb_list.bootstrapTable('refresh', {
            url: "/api/v1/zhjscgjls"
        });
    };
    //初始化表格
    function init_tb_list() {
        $tb_list.bootstrapTable({
            //url: '/api/v1/fjsb?fj_id=',
            method: 'get', //请求方式（*）
            toolbar: '#toolbar', //工具按钮用哪个容器
            clickToSelect: true, //是否启用点击选中行
            singleSelect: true,
            striped: true, //是否显示行间隔色
            showRefresh: true, //是否显示刷新按钮
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            //showToggle: true, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            sortable: true, //是否启用排序
            sortOrder: "asc", //排序方式
            columns: [{
                checkbox: true
            }, {
                field: 'riqi',
                title: '日期',
                align: 'center',
                valign: 'middle',
            }, {
                field: 'xxmc',
                title: '学校名称',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'lxr',
                title: '联系人',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'tel',
                title: '电话',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'zhiw',
                title: '职务',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'xxjdr',
                title: '学校接待人',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'jsr',
                title: '经手人',
                align: 'center',
                valign: 'middle'
            }],
            //data: [{}],
            onClickRow: function(row, $element) {
                //curRow = row;
                //alert("点击了行了！fjsb_id:" + row.fjsb_id);
            },
        });
    };

    //ajax提交
    function save() {
        $datas = {
            riqi: $riqi.val(),
            xxmc: $xxmc.val(),
            lxr: $lxr.val(),
            tel: $tel.val(),
            zhiw: $zhiw.val(),
            xxjdr: $xxjdr.val()
        };

        if ($datas.xxmc == "") {
            alert("null");
        };
        $.ajax({
            type: "Post",
            dataType: "json",
            url: '/qd/zhjscgjl',
            /*不使用这种方式，用上面的定义的对像方式
            data: {
                "riqi": $riqi.val(),
                "xxmc": $xxmc.val(),
                "lxr": $lxr.val(),
                "tel": $tel.val(),
                "zhiw": $zhiw.val(),
                "xxjdr": $xxjdr.val()
            },
            */
            data: $datas,
            success: function(res) {
                    if (res == null) {
                        console.log("返回数据是空的：" + res); //返回的是JSON数据，返回为空数据表示增加数据成功！！！
                        $("#textinfo").removeClass("text-danger").addClass("text-success");
                        $("#textinfo").html("<strong>增加" + $xxmc.val() + "参观记录成功！点击关闭退出！</strong>");
                        $("input[type=reset]").trigger("click"); //重置表单元素，清空表单内容
                        //$("form").data("formValidation").resetForm(true); //重置表单校验无用啊，无效！！！
                        $("form").bootstrapValidator('resetForm'); //重置表单的校验
                        refresh_tb_list();  //刷新表格内容
                        //$('#modal-isok').modal('hide');
                    } else {
                        $("#textinfo").removeClass("text-success").addClass("text-danger");
                        $("#textinfo").html("<strong>增加失败！请重试或退出！</strong>");
                    }
                } //success		
        }); //$.ajax
    };

    $btn_save.click(function() { //用这种方式绑定按钮事件也能执行,添加点击事件onclick="save()"
        //alert("hdhd");
        //save();
    });

    //验证初始化
    function InitValidator() {
        $('form').bootstrapValidator({　　　　　　　　
            message: 'This value is not valid',
            　feedbackIcons: {　　　　　　　　
                valid: 'glyphicon glyphicon-ok',
                　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                　　　　　　　　validating: 'glyphicon glyphicon-refresh'　　　　　　　　
            },
            fields: {
                riqi: {
                    message: '日期格式验证失败',
                    validators: {
                        notEmpty: {
                            message: '日期不能为空'
                        }
                    }
                },
                xxmc: {
                    validators: {
                        notEmpty: {
                            message: '学校名称不能为空'
                        }
                    }
                },
                lxr: {
                    validators: {
                        notEmpty: {
                            message: '联系人不能为空'
                        }
                    }
                },
                tel: {
                    validators: {
                        notEmpty: {
                            message: '联系电话不能为空'
                        }
                    }
                }
            }
        });
    };

    //初始化
    $(function() {
        //模式窗体的隐藏事件
        $('#modal-isok').on('hidden.bs.modal', function(e) {
            //window.location.reload();     //刷新页面
            refresh_tb_list();
        });

        //验证插件
        $('form').bootstrapValidator({　　　　　　　　
            message: 'This value is not valid',
            　feedbackIcons: {　　　　　　　　
                valid: 'glyphicon glyphicon-ok',
                　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                　　　　　　　　validating: 'glyphicon glyphicon-refresh'　　　　　　　　
            },
            fields: {
                riqi: {
                    message: '日期格式验证失败',
                    validators: {
                        notEmpty: {
                            message: '日期不能为空'
                        }
                    }
                },
                xxmc: {
                    validators: {
                        notEmpty: {
                            message: '学校名称不能为空'
                        }
                    }
                },
                lxr: {
                    validators: {
                        notEmpty: {
                            message: '联系人不能为空'
                        }
                    }
                },
                tel: {
                    validators: {
                        notEmpty: {
                            message: '联系电话不能为空'
                        }
                    }
                }
            }
        });

        $('form').on('success.form.bv', function(e) { //form表单点击提交之后
            // Prevent form submission
            e.preventDefault();
            // Get the form instance
            var $form = $(e.target);
            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');
            // Use Ajax to submit form data 提交至form标签中的action，result自定义
            save();
        });

        init_tb_list(); //初始化表格
        refresh_tb_list(); //刷新表格数据
    });
</script>